<template>
  <ContentContainer
    :show-pagination="false"
    :show-footer="false"
    :refresh="false"
    inner>
    <a-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical">
      <div class="text-1 text-sm/22px font-bold">清理全站</div>
      <a-button type="primary" class="w-fit mt-6" @click="handleClear(1)"
        >一键清理</a-button
      >
      <a-divider :size="2" style="border-bottom-style: dotted" />
      <div class="text-1 text-sm/22px font-bold mb-6">自定义</div>
      <a-form-item field="multi_urls" hide-label>
        <section class="relative w-80%">
          <a-textarea
            v-model="formData.multi_urls"
            :auto-size="{
              minRows: 20,
              maxRows: 50
            }"
            placeholder="URL 一行一个 ，支持带通配符，例如：
www.example.com/*.mp4
www.example.com/index.html
www.example.com/index*"
            class="w-full"></a-textarea>
          <span class="absolute right-3 bottom-2 text-#BFC2C7 z-1"
            >{{ urls.length }} / 1000</span
          >
        </section>
      </a-form-item>
      <a-form-item hide-label asterisk-position="end">
        <section class="flex flex-col">
          <a-checkbox v-model="isEncode">
            <span class="text-sm/22px">URL Encode</span>
          </a-checkbox>
          <span class="text-5 text-xs/5"
            >若 URL 含有中文，请开启 URL Encode 开关，对中文编码转换</span
          >
        </section>
      </a-form-item>
      <section>
        <a-button type="primary" @click="handleClear(2)">提交</a-button>
      </section>
    </a-form>
  </ContentContainer>
</template>
<script lang="ts" setup>
import { postApiSitePurgeApi } from '@/apis/modules/site/site'
import { type FieldRule, type FormInstance } from '@arco-design/web-vue'
import { omit } from 'lodash-es'
const route = useRoute()

const formRef = ref<FormInstance>()
const formData = ref({
  urls: [],
  purge_type: 1,
  multi_urls: '',
  id: route.params.id
})
const isEncode = ref(false)
const formRules = computed<{ [key: string]: FieldRule[] }>(() => {
  return {
    purge_type: [
      {
        required: true,
        message: '请选择'
      }
    ],
    multi_urls: [
      { required: true, message: '请输入内容', trigger: 'blur' },
      {
        validator(_value, callback) {
          if (urls.value.length > 1000) {
            callback('超过最大限制条数')
          }
          callback(
            validateHandler(urls.value, (data) => {
              const error = `URL格式错误`
              return regExpValidateHandler(
                data,
                regexpMap.optionalProtocolUrlWithFileType,
                error
              )
            })
          )
        }
      }
    ]
  }
})
const urls = computed(() => {
  return formData.value.multi_urls.split('\n').filter((item) => item.length)
})
const handleClear = async (type: 1 | 2) => {
  if (type === 1) {
    CloudModal.confirm(
      {
        content: '该操作会清理全站缓存，确认继续？'
      },
      async () => {
        await postApiSitePurgeApi({
          ...omit(formData.value, 'multi_urls', 'urls'),
          purge_type: 1
        } as any)
        CloudModal.confirm({
          content: '任务提交成功，缓存内容将于数分钟后失效',
          okText: '知道了',
          hideCancel: true
        })
      }
    )
  } else {
    const error = await formRef.value?.validate()
    if (error) return false
    const data = {
      ...omit(formData.value, 'multi_urls'),
      purge_type: 2
    }
    //URL Encode
    if (isEncode.value) {
      data.urls = formData.value.multi_urls
        .split('\n')
        .map((item) => encodeURI(item))
        .filter(Boolean)
    } else {
      data.urls = formData.value.multi_urls.split('\n').filter(Boolean)
    }
    await postApiSitePurgeApi({ ...data })
    CloudModal.confirm({
      content: '任务提交成功，缓存内容将于数分钟后失效',
      okText: '知道了',
      hideCancel: true
    })
  }
}
</script>

<style lang="less" scoped></style>
